<!--
 @Author: libing/makeup1122
 @Email: makeup1123@163.com
 @Date: "2020-04-04 16:11:33"
-->
<template>
  <v-container>
    <v-btn :to="{ name: 'NavMenuCreate' }" color="primary">新增菜单</v-btn>
    <v-data-iterator
      :items="items"
      hide-default-footer
    >
    <template v-slot:default="props">
      <v-row>
        <v-col v-for="item in props.items" :key="item.mit" cols="12" sm="6" md="4">
          <v-hover v-slot:default="{ hover }">
          <v-card :elevation="hover ? 16 : 2">
            <v-card-title>{{item.name}}
            <span v-if="item.position">（{{item.position}}）</span>
            </v-card-title>
            <v-card-text>
              <!-- <v-treeview :items="Array.from(item.content)"></v-treeview> -->
              <NavMenuTree :value="Array.from(item.content)" />
             </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn v-if="hover" text color="warning" @click="itemDeleteHandle([item])">删除</v-btn>
              <v-btn :to="{ name: 'NavMenuEdit', params: { mid: item.mid, item: item }}" color="primary" text>编辑</v-btn>
            </v-card-actions>
          </v-card>
          </v-hover>
        </v-col>
      </v-row>
    </template>
    </v-data-iterator>
  </v-container>
</template>
<script>
import * as API from '@/api/admin/nav-menu.js'
// import NavMenuTree from './components/NavMenuTree.vue'
export default {
  name: 'NavMenu',
  components: {
    NavMenuTree: () => import('./components/NavMenuTree.vue')
  },
  data: function () {
    return {
      items: []
    }
  },
  computed: {},
  created: function () {
    this.fetchData()
  },
  methods: {
    fetchData() {
      API.fetchList({
        sort: 'mid',
        descending: true,
        page_size: -1
      }).then(res => {
        this.items = res.data.data
      })
    },
    itemDeleteHandle(items) {
      if (confirm('是否确定删除？删除后无法恢复，请慎重！')) {
        API.deleteOne(items.map(e => e.mid).join('_')).then(res => {
          this.fetchData()
          this.$toasted.success(res.data)
        }).catch(err => {
          return Promise.reject(err)
        })
      }
    }
  }
}
</script>
<style scoped>
</style>
